<template>
	<view class="content">
		<view class="detailName card">
			<text class="dn1">{{state.detailsData.jobName}}</text>
			<text class="title1">薪资待遇</text>
			<text class="dn2" v-if="state.detailsData.comprehensiveSalaryType == 1">{{state.detailsData.comprehensiveSalaryStart}}-{{state.detailsData.comprehensiveSalaryEnd}}元/月</text>
			<text class="dn2" v-else>面议</text>
			
		</view>
		<view class="detailTag card">
			<text class="dt1">岗位福利</text>
			<view class="dt2">
				<text v-for="(item,idx) in state.detailsData.basicBenefitsArr" :key="idx">{{item}}</text>
			</view>
		</view>
		<view class="detailJob card">
			<text class="dt1">工作要求</text>
			<text class="dt2">{{getEdu(state.detailsData.educationRequirements)}} | {{getWork(state.detailsData.workExperienceTime)}} | {{getAge(state.detailsData.age)}}</text>
		</view>

		<view class="detailAddress card">
			<view class="da1">
				工作地址
			</view>
			<view class="da2">
				<map style="width: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			
			</view>
			<view class="da3">
				{{state.detailsData.address}}
			</view>
		</view>
		<view class="detailIntro card">
			<view class="di1">职位描述</view>
			<view class="detailZw">
				<u-parse :content="state.detailsData.jobDescription2"></u-parse>
			</view>
		</view>
	</view>
	<view class="detailBottom">
		<u-button class="dbBtn1" @click="eventFun('edit')">编辑</u-button>
		<u-button v-if="state.detailsData.status==1" class="dbBtn2" @click="eventFun('close')">关闭职位</u-button>
		<u-button v-if="state.detailsData.status==0" class="dbBtn2" @click="eventFun('open')">开启职位</u-button>
	</view>
	
	<u-modal :show="modalData.show" :closeOnClickOverlay="true" :title="modalData.title" >
		<view class="content-main" slot="content">{{modalData.content}}</view>
		<template #confirmButton>
			<u-button
				class="custom-style" 
				text="我知道了"
				type="info"
				shape="circle"
				@click="modalData.show= false"
			></u-button>
		</template>
	</u-modal>
</template>

<script lang="ts" setup>
	
	import { ref,reactive,getCurrentInstance} from "vue";
	import {useRouter} from 'uni-mini-router'
	import { onLoad } from '@dcloudio/uni-app';
	import {getEdu,getWork,getAge} from '@/utlis/common.js'
	const router = useRouter()
	const {proxy} = getCurrentInstance()
	
	let state = reactive({
		detailsData:{}
	})
	let latitude = ref(39.909)
	let longitude = ref(116.39742)
	let covers = ref([
		{
			latitude: 39.9085,
			longitude: 116.39747,
			title: '',
			iconPath: '../../../static/location.png',
			// #ifdef APP-PLUS
			// iconPath: '../../../static/app-plus/location@3x.png',
			// #endif
			// #ifndef APP-PLUS
			// iconPath: '../../../static/location.png',
			// #endif
		}
		// , {
		// 	latitude: 39.90,
		// 	longitude: 116.39,
		// 	// #ifdef APP-PLUS
		// 	iconPath: '../../../static/app-plus/location@3x.png',
		// 	// #endif
		// 	// #ifndef APP-PLUS
		// 	// iconPath: '../../../static/location.png',
		// 	// #endif
		// }
	])
	const companyDetail = () => {
		router.push({
			name: 'companyDetail',
			params: {
				companyId:state.detailsData.companyId
			}
		})
	}
	
	const getMap =(e) => {
		
		uni.request({
			url: 'https://apis.map.qq.com/ws/geocoder/v1/',//腾讯官方逆解析接口，可直接复制
				data: {
			
				'address':e,
				'key': "O6DBZ-CGPCZ-HM2XW-T2J45-NJRN3-YMB6J",//自己申请的Key
				},
				method: "GET",
				success(res) {
					console.log(res,'解析成功返回的参数');
					console.log(res.data.result.location.lat,'解析成功返回的参数lat');
					console.log(res.data.result.location.lng,'解析成功返回的参数lng');
					
					latitude.value = res.data.result.location.lat
					longitude.value = res.data.result.location.lng
					
					console.log(latitude.value)
				}
			})
								
	}
	
	
	let modalData = reactive({
		show:false,
		title:'投递成功！',
		content:'',	
	})
	let jobId = ref('')
	onLoad((options) => {
		jobId.value = options.id
		getDetail()
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.getMeiyeRecruitJob2Details, {
			id:jobId.value,
		}).then((res) => {
			if(res.code === 200){
				if(res.result.basicBenefits){
					res.result.basicBenefitsArr = []
					res.result.basicBenefits.split(',').forEach(el=>{
						if(el!=''){
							res.result.basicBenefitsArr.push(el)
						}
					})
					
				}else{
					res.result.basicBenefitsArr = []
				}
					
				state.detailsData = res.result
				latitude.value = res.result.latitude
				longitude.value = res.result.longitude
				covers.value[0].latitude= res.result.latitude
				covers.value[0].longitude= res.result.longitude
				// getMap(res.result.cityName+res.result.areaName+res.result.address)
				
			}
		})
	}
	
	const eventFun = (type)=>{
		switch (type){
			case 'edit':
				router.push({
					name: 'addJob',
					params: {
						type:'edit',
						id:jobId.value 
					}
				})
				// if(state.detailsData.isColl == 1){
				// 	meiyeCollection2DeleteFun()
				// }else{
				// 	meiyeCollection2AddFun()
				// }
				break;
			case "close":
				meiyeRecruitJob3Edit("0")
				break;
			case "open":
				meiyeRecruitJob3Edit("1")
				break;
			default:
				break;
		}
	}
	// 收藏
	const meiyeCollection2AddFun = ()=>{
		let data = {
			colProductId:jobId.value,
			colType:4
		}
		proxy.$req('POST', proxy.$api.meiyeCollection2Add, data).then((res) => {
			if(res.code === 200){
				uni.showToast({
					title: '收藏成功',
					icon: 'none'
				})
				getDetail()
				
			}
		})
	}
	// 取消收藏
	const meiyeCollection2DeleteFun = ()=>{
		let data = {
			id:state.detailsData.collId,
		}
		proxy.$req('DELETE', proxy.$api.meiyeCollection2Delete, data).then((res) => {
			if(res.code === 200){
				uni.showToast({
					title: '取消成功',
					icon: 'none'
				})
				getDetail()		
			}
		})
	}
	// 申请岗位
	const meiyeCollection2ApplyFun = ()=>{
		proxy.$req('GET', proxy.$api.meiyeCollection2Apply, {id:jobId.value}).then((res) => {
			if(res.code === 200){
				
				modalData.show = true
				let job = state.detailsData.jobCategoryName
				modalData.content = `${job}岗位已投递成功，请等待老板回复`
				getDetail()
				
			}
		})
	}
	
	const meiyeRecruitJob3Edit = (e)=>{
		proxy.$req('put', proxy.$api.meiyeRecruitJob3Edit, {id:jobId.value,status:e}).then((res) => {
			if(res.code === 200){
				
				console.log("开始")
				 // modalData.show = true
				 // let job = state.detailsData.jobCategoryName
				 if(e==1){
					 uni.showToast({
					 	title: '岗位开启成功',
					 	icon: 'none'
					 })
				 }
				 if(e==2){
					 uni.showToast({
					 	title: '岗位关闭成功',
					 	icon: 'none'
					 })
				 }

				 getDetail()
				getDetail()
			}
		})
	}
</script>

<style lang="scss" scoped>
	page{
		background:#f6f6f6;
	}
	.content-main{
		color: #636366;
		text-align: center;
		line-height:60rpx;
	}
	.custom-style {
		color:#636366;
		width: 220rpx;
		border: 1rpx solid #979797;
	}
	.content {
		padding: 20rpx 24rpx 200rpx;
		background:#f6f6f6;

		.detailName {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.dn1 {
				font-size: 40rpx;
				font-weight: 600;
				margin: 30rpx 0 40rpx;
			}
			.title1{
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.dn2 {
				color:#8E8E93;
				// font-weight: 600;
				margin-bottom: 20rpx;
			}

			.dn3 {
				font-size: 26rpx;
			}
		}

		.detailTag {
			margin-top: 20rpx;
			// padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;

			.dt1 {
				font-size: 32rpx;
				font-weight: 600;
			}

			.dt2 {
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;

				text {
					font-size: 26rpx;
					padding: 6rpx 15rpx;
					background-color: #eee;
					color:#333;
					border-radius: 8rpx;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}
			}
		}
		.detailJob{
			margin-top: 20rpx;
			// padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;
			display: flex;
			flex-direction: column;
			
			.dt1 {
				font-size: 32rpx;
				font-weight: 600;
				margin: 15rpx 0 40rpx;
			}
			.dt2{
				color:#8E8E93;
			}
			
		}

		.detailIntro {
			margin-top: 20rpx;
			padding-bottom:30rpx;
			border-bottom: 1rpx solid #eeeeee;
			.di1 {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.detailAddress {
			margin-top: 20rpx;
			border-bottom:1rpx solid #eee;

			.da1 {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.da2 {
				background-color: #000;
			}
			.da3{
				padding:12rpx 0 16rpx 0;
				color:#8E8E93;
			}
		}

		.detailCompany {
			margin-top: 20rpx;

			.dc1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.dc2 {
				font-size: 24rpx;
				color: #909399;
				margin-bottom: 20rpx;
			}

			.dc3 {
				
				.companyImg{
					width:100%;
				}
			}
		}
	}

	.detailBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		// background-color: #d5d5d5;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dbLeft {
			display: flex;
		}

		.db1 {
			width: 110rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.dbText {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #909399;
			}
		}
		.dbBtn1 {
			width: 200rpx;
			height: 100rpx;
			background-color:#0000004d;;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 100rpx;
		}
		.dbBtn2 {
			width: 300rpx;
			height: 100rpx;
			background-color:#CB645E;;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	.card{
		background:#fff;
		box-sizing: border-box;
		border: 2rpx solid #fff;
		// margin: 30rpx auto;
		padding: 24rpx;
		background:#fff;
		border-radius: 24rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
	}
</style>